<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    .el-table .cell {
        white-space: pre-line;
    }
</style>
<body>
<div id="app">

    <el-radio v-model="radio" label="0">我的进货</el-radio>
    <el-radio v-model="radio" label="1">进货总数</el-radio>
    <el-radio v-model="radio" label="2">平级进货</el-radio>
    <el-radio v-model="radio" label="3">平级总数</el-radio>
    <el-radio v-model="radio" label="4">我的销量</el-radio>
    <el-radio v-model="radio" label="5">销量总数</el-radio>
    <el-radio v-model="radio" label="6">进货奖金</el-radio>
    <el-radio v-model="radio" label="7">分享奖金</el-radio>
    <el-radio v-model="radio" label="8">拨出奖金</el-radio>


    <el-table v-if="radio==0"
              v-loading="loading"
              :row-class-name="tableRowClassName"
              :data="list[radio]"
              border
              style="width: 100%">

        <el-table-column
                type="index"
                label="排序"
                width="80">
        </el-table-column>

        <el-table-column
                prop="date"
                label="日期"
                width="180">
        </el-table-column>

        <el-table-column
                prop="fromUser"
                label="转让人"
                width="180">
        </el-table-column>

        <el-table-column
                prop="toUser"
                label="接收人"
                width="180">
        </el-table-column>

        <el-table-column
                prop="item"
                label="明细">
        </el-table-column>
    </el-table>

    <el-table v-if="radio==1"
              v-loading="loading"
              :row-class-name="tableRowClassName"
              :data="list[radio]"
              border
              style="width: 100%">

        <el-table-column
                type="index"
                label="排序"
                width="80">
        </el-table-column>

        <el-table-column
                prop="name"
                label="名字"
                width="180">
        </el-table-column>

        <el-table-column
                prop="amount"
                label="数量"
                width="180">
        </el-table-column>


    </el-table>

    <el-table v-if="radio==2"
              v-loading="loading"
              :row-class-name="tableRowClassName"
              :data="list[radio]"
              border
              style="width: 100%">

        <el-table-column
                type="index"
                label="排序"
                width="80">
        </el-table-column>

        <el-table-column
                prop="date"
                label="日期"
                width="180">
        </el-table-column>

        <el-table-column
                prop="fromUser"
                label="转让人"
                width="180">
        </el-table-column>

        <el-table-column
                prop="toUser"
                label="接收人"
                width="180">
        </el-table-column>

        <el-table-column
                prop="item"
                label="明细">
        </el-table-column>
    </el-table>

    <el-table v-if="radio==3"
              v-loading="loading"
              :row-class-name="tableRowClassName"
              :data="list[radio]"
              border
              style="width: 100%">

        <el-table-column
                type="index"
                label="排序"
                width="80">
        </el-table-column>

        <el-table-column
                prop="name"
                label="名字"
                width="180">
        </el-table-column>

        <el-table-column
                prop="amount"
                label="数量"
                width="180">
        </el-table-column>


    </el-table>

    <el-table v-if="radio==4"
              v-loading="loading"
              :row-class-name="tableRowClassName"
              :data="list[radio]"
              border
              style="width: 100%">


        <el-table-column
                type="index"
                label="排序"
                width="80">
        </el-table-column>

        <el-table-column
                prop="date"
                label="日期"
                width="180">
        </el-table-column>

        <el-table-column
                prop="fromUser"
                label="转让人"
                width="180">
        </el-table-column>

        <el-table-column
                prop="toUser"
                label="接收人"
                width="180">
        </el-table-column>

        <el-table-column
                prop="item"
                label="明细">
        </el-table-column>
    </el-table>

    <el-table v-if="radio==5"

              v-loading="loading"
              :row-class-name="tableRowClassName"
              :data="list[radio]"
              border
              style="width: 100%">

        <el-table-column
                type="index"
                label="排序"
                width="80">
        </el-table-column>

        <el-table-column
                prop="name"
                label="名字"
                width="180">
        </el-table-column>

        <el-table-column
                prop="amount"
                label="数量"
                width="180">
        </el-table-column>


    </el-table>

    <el-table v-if="radio==6"

              v-loading="loading"
              :row-class-name="tableRowClassName"
              :data="list[radio]"
              border
              style="width: 100%">

        <el-table-column
                type="index"
                label="排序"
                width="80">
        </el-table-column>

        <el-table-column
                prop="name"
                label="名字"
                width="180">
        </el-table-column>

        <el-table-column
                prop="amount"
                label="数量"
                width="180">
        </el-table-column>

        <el-table-column
                label="操作"
                width="180">
            <template slot-scope="scope">
                <%--<el-button size="mini" type="success">一键转出</el-button>--%>
            </template>
        </el-table-column>

        <el-table-column
                prop="info"
                label="明细">
        </el-table-column>
    </el-table>

    <el-table v-if="radio==7"

              v-loading="loading"
              :row-class-name="tableRowClassName"
              :data="list[radio]"
              border
              style="width: 100%">

        <el-table-column
                type="index"
                label="排序"
                width="80">
        </el-table-column>

        <el-table-column
                prop="name"
                label="名字"
                width="180">
        </el-table-column>

        <el-table-column
                prop="amount"
                label="数量"
                width="180">
        </el-table-column>

        <el-table-column
                label="操作"
                width="180">
            <template slot-scope="scope">
               <%--<el-button size="mini" type="success" @click="alert('暂未开放')">一键转出</el-button>--%>
            </template>
        </el-table-column>

        <el-table-column
                prop="info"
                label="明细">
        </el-table-column>
    </el-table>

    <el-table v-if="radio==8"

              v-loading="loading"
              :row-class-name="tableRowClassName"
              :data="list[radio]"
              border
              style="width: 100%">

        <el-table-column
                type="index"
                label="排序"
                width="80">
        </el-table-column>

        <el-table-column
                prop="name"
                label="名字"
                width="180">
        </el-table-column>

        <el-table-column
                prop="amount"
                label="数量"
                width="180">
        </el-table-column>

        <el-table-column
                align="center"
                label="操作"
                width="180">
            <template slot-scope="scope">
                <el-button size="mini" type="success" @click="alert('暂未开放')">一键转出</el-button>
            </template>
        </el-table-column>

        <el-table-column
                prop="info"
                label="明细">
        </el-table-column>
    </el-table>

</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        methods: {
            tableRowClassName: function ({row, rowIndex}) {

                if (row.addLevel === 1) {
                    return 'warning-row';
                } else {
                    console.log(row.add)
                    return 'success-row';
                }
                return '';
            },
        },
        created: function () {
            this.loading = true;
            var s = this
            axios.post('/count/transfer/calcuate.json', {})
                .then(function (response) {
                    console.log(response);
                    s.list = response.data
                    s.loading = false;
                })
                .catch(function (error) {
                    console.log(error);
                    s.loading = false;
                    alert("错误");
                });
        },
        data: function () {
            return {
                radio: "0",
                loading: false,
                list: null,
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
            }
        }
    })
</script>
</html>